它解決了什麼問題？

Puppeteer 是一層 Chromium 的封裝，提供了 API 讓開發者以程式操作瀏覽器。如此以來便提供了相對可控的執行環境來測試網頁。

Headless

螢幕就像是電腦的「頭」，而一台沒有螢幕的電腦我們會稱它為「無頭」 (headless) 的狀態。因此當程式能夠在沒有 GUI 的狀態下使用指令或程式控制，我們也會用 headless 來形容它。

Chrome 便是提供了 Headless 模式，顧名思義就是在不執行的 GUI 的模式下運行瀏覽器。

chrome \
    --headless \                   # Runs Chrome in headless mode.
    --disable-gpu \                # Temporarily needed if running on Windows.
    --remote-debugging-port=9222 \
    https://www.chromestatus.com   # URL to open. Defaults to about:blank.

它在這個專案中扮演了什麼角色？

首先，使用 R3F 對我而言是一個極大的誘因，因為目前我對於 Javascript, React, hook ...等工具有較多的使用經驗，能夠更快速的建立應用程式。如果使用 C#/Unity3D, C++/OpenGL 之類的方案勢必需要花更多時間重新學習它們。

關於讓瀏覽器的 3D 渲染 headless 其實仍有 headless-gl 之類的方案，但是 R3F 已經是封裝了好幾層的 API，要從仰賴鏈的深處置換掉可能會發生很多預料外的問題需要修復，並且我有找到一些 headless three 方案本質是使用軟體模擬繪圖運算，它們的效能其極低下。

而 Puppeteer 提供了完整的瀏覽器環境，React App 在之中能夠良好的運作，讓我可以專注於開發而不用處理環境嫁接可能發生的問題。

其他應用-爬蟲

HTTP 的資源皆能夠以 HTTP request 取得，如：

curl https://www.google.com/

也可以加入一些 header 或是 cookie 把 request 偽裝的更像是從瀏覽器發出的。

但是有些網站的資訊必須要經過執行 Javascript 之後才會顯示，比如：SPA (Single-page application) 網站，單靠 http request 你只能拿到原始的網頁資訊而沒有執行結果，但是只要透過 Puppeteer 作為瀏覽器訪問這些網頁，它能執行這些網頁上 Javascrip，開發者再用程式把資訊從執行結果中爬下來。